// packageAPI/pages/canvas-context/canvas-context.js
Page({
  data: {
    result: '等待测试...',
    resultStr: '',
    formData: {},
    schema: [],
    title: 'CanvasContext API',
    zh: 'CanvasContext API 测试',
    weburl: '',
    routeData: {},
    apiName: ''
  },

  onLoad(options) {
    console.log('CanvasContext页面加载');
    console.log('路由传递的参数:', options);
    
    // 获取从newAPI页面传递的参数并赋值
    if (options) {
      const routeData = {
        zh: options.zh || null,           
        title: options.title || null,       
        remark: options.remark || null,  
        webUrl: options.webUrl || null    
      };
      
      this.setData({
        routeData: routeData,
        title: routeData.title || 'CanvasContext API',       
        zh: routeData.zh || 'CanvasContext API 测试',  
        weburl: routeData.webUrl || '',             
        result: '页面加载完成',
        resultStr: this.formatResult({
          status: '页面加载完成',
          apiName: routeData.zh,
          pageTitle: routeData.title,
          docUrl: routeData.webUrl,
          remark: routeData.remark,
          note: 'CanvasContext API 页面已准备就绪'
        })
      });
    } else {
      this.setData({
        routeData: {},
        title: 'CanvasContext API',                           
        zh: 'CanvasContext API 测试',                  
        weburl: '',                              
        result: '页面加载完成',
        resultStr: this.formatResult({
          status: '页面加载完成',
          note: 'CanvasContext API 页面已准备就绪'
        })
      });
    }
  },

  // API处理函数
  handleApiCall: function(e) {
    const apiName = e.currentTarget.dataset.apiname;
    
    this.setData({
      apiName: apiName
    });
    
    switch(apiName) {
      case 'CanvasContext.arc':
        this.testCanvasContextArcFunc();
        break;
      case 'CanvasContext.arcTo':
        this.testCanvasContextArcToFunc();
        break;
      case 'CanvasContext.beginPath':
        this.testCanvasContextBeginPathFunc();
        break;
      case 'CanvasContext.bezierCurveTo':
        this.testCanvasContextBezierCurveToFunc();
        break;
      case 'CanvasContext.clearRect':
        this.testCanvasContextClearRectFunc();
        break;
      case 'CanvasContext.clip':
        this.testCanvasContextClipFunc();
        break;
      case 'CanvasContext.closePath':
        this.testCanvasContextClosePathFunc();
        break;
      case 'CanvasContext.createGradient':
        this.testCanvasContextGradientFunc();
        break;
      case 'CanvasContext.createPattern':
        this.testCanvasContextPatternFunc();
        break;
      case 'CanvasContext.draw':
        this.testCanvasContextDrawFunc();
        break;
      case 'CanvasContext.drawImage':
        this.testCanvasContextDrawImageFunc();
        break;
      case 'CanvasContext.fill':
        this.testCanvasContextFillFunc();
        break;
      case 'CanvasContext.fillRect':
        this.testCanvasContextFillRectFunc();
        break;
      case 'CanvasContext.fillText':
        this.testCanvasContextFillTextFunc();
        break;
      case 'CanvasContext.lineTo':
        this.testCanvasContextLineToFunc();
        break;
      case 'CanvasContext.moveTo':
        this.testCanvasContextMoveToFunc();
        break;
      case 'CanvasContext.quadraticCurveTo':
        this.testCanvasContextQuadraticCurveToFunc();
        break;
      case 'CanvasContext.rect':
        this.testCanvasContextRectFunc();
        break;
      case 'CanvasContext.restore':
        this.testCanvasContextRestoreFunc();
        break;
      case 'CanvasContext.rotate':
        this.testCanvasContextRotateFunc();
        break;
      case 'CanvasContext.save':
        this.testCanvasContextSaveFunc();
        break;
      case 'CanvasContext.scale':
        this.testCanvasContextScaleFunc();
        break;
      case 'CanvasContext.setFillStyle':
        this.testCanvasContextSetFillStyleFunc();
        break;
      case 'CanvasContext.setFontSize':
        this.testCanvasContextSetFontSizeFunc();
        break;
      case 'CanvasContext.setGlobalAlpha':
        this.testCanvasContextSetGlobalAlphaFunc();
        break;
      case 'CanvasContext.setLineCap':
        this.testCanvasContextSetLineCapFunc();
        break;
      case 'CanvasContext.setLineDash':
        this.testCanvasContextSetLineDashFunc();
        break;
      case 'CanvasContext.setLineJoin':
        this.testCanvasContextSetLineJoinFunc();
        break;
      case 'CanvasContext.setLineWidth':
        this.testCanvasContextSetLineWidthFunc();
        break;
      case 'CanvasContext.setMiterLimit':
        this.testCanvasContextSetMiterLimitFunc();
        break;
      case 'CanvasContext.setShadow':
        this.testCanvasContextSetShadowFunc();
        break;
      case 'CanvasContext.setStrokeStyle':
        this.testCanvasContextSetStrokeStyleFunc();
        break;
      case 'CanvasContext.setTextAlign':
        this.testCanvasContextSetTextAlignFunc();
        break;
      case 'CanvasContext.setTextBaseline':
        this.testCanvasContextSetTextBaselineFunc();
        break;
      case 'CanvasContext.setTransform':
        this.testCanvasContextSetTransformFunc();
        break;
      case 'CanvasContext.stroke':
        this.testCanvasContextStrokeFunc();
        break;
      case 'CanvasContext.strokeRect':
        this.testCanvasContextStrokeRectFunc();
        break;
      case 'CanvasContext.strokeText':
        this.testCanvasContextStrokeTextFunc();
        break;
      case 'CanvasContext.transform':
        this.testCanvasContextTransformFunc();
        break;
      case 'CanvasContext.translate':
        this.testCanvasContextTranslateFunc();
        break;
      case 'CanvasContext.test':
        this.testCanvasContextSimpleFunc();
        break;
      case 'CanvasContext.clear':
        this.clearCanvasFunc();
        break;
      default:
        this.setData({
          result: `未知的API: ${apiName}`,
          resultStr: this.formatResult(`未知的API: ${apiName}`, false)
        });
    }
  },

  onReady() {
    console.log('CanvasContext页面渲染完成');
    this.setData({
      result: 'CanvasContext API 已准备就绪',
      resultStr: this.formatResult({
        status: 'CanvasContext API 已准备就绪',
        note: '点击下方按钮测试各种CanvasContext方法',
        canvasId: 'canvasContext'
      })
    });
  },

  getFormData(e) {
    this.setData({
      formData: e.detail
    });
  },

  formatResult(data, isSuccess = true) {
    const status = isSuccess ? '成功' : '失败';
    const color = isSuccess ? '#34c759' : '#ff3b30';
    let html = `<div style="color: ${color}; font-weight: bold;">${status}</div>`;
    
    if (typeof data === 'object') {
      html += '<div style="background: #f5f5f5; padding: 8px; border-radius: 4px; margin-top: 5px; font-size: 12px;">';
      html += JSON.stringify(data, null, 2).replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
      html += '</div>';
    } else {
      html += `<div style="margin-top: 5px;">${data}</div>`;
    }
    
    return html;
  },

  // 清空画布
  clearCanvas() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      ctx.clearRect(0, 0, 300, 300);
      ctx.setFillStyle('#ffffff');
      ctx.fillRect(0, 0, 300, 300);
      ctx.draw();
      
      this.setData({
        result: '画布已清空',
        resultStr: this.formatResult('画布已清空')
      });
    } catch (error) {
      this.setData({
        result: `清空失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // CanvasContext简单测试
  testCanvasContextSimple() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.clearRect(0, 0, 300, 300);
      ctx.setFillStyle('#e8f4fd');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(18);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext 测试成功!', 150, 50);
      
      ctx.setFillStyle('#ff6b6b');
      ctx.fillRect(50, 80, 80, 60);
      
      ctx.setFillStyle('#4ecdc4');
      ctx.beginPath();
      ctx.arc(200, 110, 30, 0, 2 * Math.PI);
      ctx.fill();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(14);
      ctx.fillText('CanvasContext API 正常工作', 150, 180);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext简单测试成功',
        resultStr: this.formatResult('CanvasContext API正常工作')
      });
      
    } catch (error) {
      this.setData({
        result: `CanvasContext测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // arc - 弧线
  testCanvasContextArc() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      // Draw coordinates
      ctx.arc(100, 75, 50, 0, 2 * Math.PI);
      ctx.setFillStyle('#EEEEEE');
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(40, 75);
      ctx.lineTo(160, 75);
      ctx.moveTo(100, 15);
      ctx.lineTo(100, 135);
      ctx.setStrokeStyle('#AAAAAA');
      ctx.stroke();

      ctx.setFontSize(12);
      ctx.setFillStyle('black');
      ctx.fillText('0', 165, 78);
      ctx.fillText('0.5*PI', 83, 145);
      ctx.fillText('1*PI', 15, 78);
      ctx.fillText('1.5*PI', 83, 10);

      // Draw points
      ctx.beginPath();
      ctx.arc(100, 75, 2, 0, 2 * Math.PI);
      ctx.setFillStyle('lightgreen');
      ctx.fill();

      ctx.beginPath();
      ctx.arc(100, 25, 2, 0, 2 * Math.PI);
      ctx.setFillStyle('blue');
      ctx.fill();

      ctx.beginPath();
      ctx.arc(150, 75, 2, 0, 2 * Math.PI);
      ctx.setFillStyle('red');
      ctx.fill();

      // Draw arc
      ctx.beginPath();
      ctx.arc(100, 75, 50, 0, 1.5 * Math.PI);
      ctx.setStrokeStyle('#333333');
      ctx.stroke();
      
      // 添加标题
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.arc 演示', 150, 200);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.arc 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.arc',
          description: '绘制弧线和圆形坐标系统'
        })
      });
    } catch (error) {
      this.setData({
        result: `arc 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // arcTo - 弧线到
  testCanvasContextArcTo() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f8f9fa');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.arcTo 演示', 150, 30);
      
      ctx.setStrokeStyle('#e74c3c');
      ctx.setLineWidth(3);
      ctx.beginPath();
      ctx.moveTo(50, 80);
      ctx.arcTo(150, 80, 150, 150, 50);
      ctx.lineTo(150, 200);
      ctx.stroke();
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.arcTo 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.arcTo',
          description: '在两个控制点之间绘制弧线'
        })
      });
    } catch (error) {
      this.setData({
        result: `arcTo 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // beginPath - 开始路径
  testCanvasContextBeginPath() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#fff8dc');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.beginPath 演示', 150, 30);
      
      ctx.setStrokeStyle('#e74c3c');
      ctx.setLineWidth(3);
      ctx.moveTo(50, 80);
      ctx.lineTo(100, 80);
      ctx.lineTo(75, 120);
      ctx.stroke();
      
      ctx.beginPath();
      ctx.setStrokeStyle('#27ae60');
      ctx.moveTo(150, 80);
      ctx.lineTo(200, 80);
      ctx.lineTo(175, 120);
      ctx.stroke();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(12);
      ctx.fillText('红色: 连续路径', 75, 140);
      ctx.fillText('绿色: beginPath后', 175, 140);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.beginPath 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.beginPath',
          description: '开始新的路径，清除之前的路径'
        })
      });
    } catch (error) {
      this.setData({
        result: `beginPath 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // bezierCurveTo - 贝塞尔曲线
  testCanvasContextBezierCurveTo() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f0f0f0');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.bezierCurveTo 演示', 150, 30);
      
      ctx.setStrokeStyle('#9b59b6');
      ctx.setLineWidth(3);
      ctx.beginPath();
      ctx.moveTo(50, 100);
      ctx.bezierCurveTo(50, 50, 200, 50, 200, 100);
      ctx.stroke();
      
      ctx.setStrokeStyle('#e67e22');
      ctx.beginPath();
      ctx.moveTo(50, 150);
      ctx.bezierCurveTo(100, 100, 150, 200, 250, 150);
      ctx.stroke();
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.bezierCurveTo 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.bezierCurveTo',
          description: '绘制三次贝塞尔曲线'
        })
      });
    } catch (error) {
      this.setData({
        result: `bezierCurveTo 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // clearRect - 清除矩形
  testCanvasContextClearRect() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#3498db');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#e74c3c');
      ctx.fillRect(50, 50, 80, 80);
      
      ctx.setFillStyle('#27ae60');
      ctx.beginPath();
      ctx.arc(200, 90, 40, 0, 2 * Math.PI);
      ctx.fill();
      
      ctx.clearRect(75, 75, 30, 30);
      ctx.clearRect(180, 70, 40, 40);
      
      ctx.setFillStyle('#fff');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.clearRect 演示', 150, 30);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.clearRect 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.clearRect',
          description: '清除指定矩形区域'
        })
      });
    } catch (error) {
      this.setData({
        result: `clearRect 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // clip - 裁剪
  testCanvasContextClip() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#ecf0f1');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.clip 演示', 150, 30);
      
      ctx.save();
      
      ctx.beginPath();
      ctx.arc(150, 120, 60, 0, 2 * Math.PI);
      ctx.clip();
      
      const gradient = ctx.createLinearGradient(90, 60, 210, 180);
      gradient.addColorStop(0, '#ff6b6b');
      gradient.addColorStop(1, '#45b7d1');
      ctx.setFillStyle(gradient);
      ctx.fillRect(90, 60, 120, 120);
      
      ctx.restore();
      
      ctx.setStrokeStyle('#34495e');
      ctx.setLineWidth(2);
      ctx.beginPath();
      ctx.arc(150, 120, 60, 0, 2 * Math.PI);
      ctx.stroke();
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.clip 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.clip',
          description: '设置裁剪区域'
        })
      });
    } catch (error) {
      this.setData({
        result: `clip 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // closePath - 闭合路径
  testCanvasContextClosePath() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f5f5f5');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.closePath 演示', 150, 30);
      
      // 不使用closePath的三角形
      ctx.setStrokeStyle('#e74c3c');
      ctx.setLineWidth(3);
      ctx.beginPath();
      ctx.moveTo(80, 80);
      ctx.lineTo(120, 80);
      ctx.lineTo(100, 120);
      ctx.stroke();
      
      // 使用closePath的三角形
      ctx.setStrokeStyle('#27ae60');
      ctx.beginPath();
      ctx.moveTo(180, 80);
      ctx.lineTo(220, 80);
      ctx.lineTo(200, 120);
      ctx.closePath();
      ctx.stroke();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(12);
      ctx.fillText('未闭合', 100, 140);
      ctx.fillText('已闭合', 200, 140);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.closePath 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.closePath',
          description: '闭合当前路径'
        })
      });
    } catch (error) {
      this.setData({
        result: `closePath 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // createGradient - 渐变
  testCanvasContextGradient() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#fff');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext 渐变演示', 150, 30);
      
      // 线性渐变
      const linearGradient = ctx.createLinearGradient(50, 60, 150, 60);
      linearGradient.addColorStop(0, '#ff6b6b');
      linearGradient.addColorStop(1, '#45b7d1');
      ctx.setFillStyle(linearGradient);
      ctx.fillRect(50, 60, 100, 40);
      
      // 圆形渐变
      const radialGradient = ctx.createCircularGradient(200, 80, 0, 200, 80, 30);
      radialGradient.addColorStop(0, '#9b59b6');
      radialGradient.addColorStop(1, '#2c3e50');
      ctx.setFillStyle(radialGradient);
      ctx.beginPath();
      ctx.arc(200, 80, 30, 0, 2 * Math.PI);
      ctx.fill();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(12);
      ctx.fillText('线性渐变', 100, 115);
      ctx.fillText('圆形渐变', 200, 125);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext 渐变测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.createGradient',
          description: '创建渐变效果'
        })
      });
    } catch (error) {
      this.setData({
        result: `渐变测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // createPattern - 图案
  testCanvasContextPattern() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f8f9fa');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.createPattern 演示', 150, 30);
      
      // 模拟棋盘图案
      for (let x = 60; x < 140; x += 15) {
        for (let y = 60; y < 140; y += 15) {
          ctx.setFillStyle(((x + y) / 15) % 2 === 0 ? '#e74c3c' : '#3498db');
          ctx.fillRect(x, y, 10, 10);
        }
      }
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(12);
      ctx.fillText('图案模拟效果', 100, 160);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.createPattern 演示完成',
        resultStr: this.formatResult({
          method: 'CanvasContext.createPattern',
          description: '创建图案填充'
        })
      });
    } catch (error) {
      this.setData({
        result: `图案测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // draw - 绘制
  testCanvasContextDraw() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#ecf0f1');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#2c3e50');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.draw 演示', 150, 30);
      
      ctx.setFillStyle('#e74c3c');
      ctx.fillRect(50, 60, 60, 60);
      
      ctx.setFillStyle('#27ae60');
      ctx.beginPath();
      ctx.arc(200, 90, 30, 0, 2 * Math.PI);
      ctx.fill();
      
      ctx.setFillStyle('#34495e');
      ctx.setFontSize(12);
      ctx.fillText('CanvasContext需要调用draw()方法', 150, 180);
      ctx.fillText('才能将绘制的内容显示在画布上', 150, 200);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.draw 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.draw',
          description: '将绘制的内容显示在画布上'
        })
      });
    } catch (error) {
      this.setData({
        result: `draw 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // drawImage - 绘制图片
  testCanvasContextDrawImage() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f0f8ff');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.drawImage 演示', 150, 30);
      
      // 模拟图片位置
      ctx.setStrokeStyle('#ddd');
      ctx.setLineWidth(2);
      ctx.strokeRect(50, 60, 80, 60);
      ctx.strokeRect(150, 60, 100, 75);
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(12);
      ctx.fillText('原始尺寸', 90, 85);
      ctx.fillText('指定尺寸', 200, 100);
      
      ctx.setFontSize(10);
      ctx.fillText('实际使用需要图片资源', 150, 160);
      ctx.fillText('drawImage(image, x, y)', 150, 180);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.drawImage 演示完成',
        resultStr: this.formatResult({
          method: 'CanvasContext.drawImage',
          description: '在画布上绘制图片'
        })
      });
    } catch (error) {
      this.setData({
        result: `drawImage 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // fill - 填充
  testCanvasContextFill() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#fff8dc');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.fill 演示', 150, 30);
      
      // 填充圆形
      ctx.setFillStyle('#e74c3c');
      ctx.beginPath();
      ctx.arc(100, 100, 40, 0, 2 * Math.PI);
      ctx.fill();
      
      // 填充多边形
      ctx.setFillStyle('#27ae60');
      ctx.beginPath();
      ctx.moveTo(200, 60);
      ctx.lineTo(240, 100);
      ctx.lineTo(200, 140);
      ctx.lineTo(160, 100);
      ctx.closePath();
      ctx.fill();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.fillText('圆形填充', 100, 155);
      ctx.fillText('多边形填充', 200, 155);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.fill 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.fill',
          description: '填充当前路径'
        })
      });
    } catch (error) {
      this.setData({
        result: `fill 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // fillRect - 填充矩形
  testCanvasContextFillRect() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f5f5f5');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.fillRect 演示', 150, 30);
      
      // 不同颜色的矩形
      ctx.setFillStyle('#e74c3c');
      ctx.fillRect(50, 60, 60, 40);
      
      ctx.setFillStyle('#27ae60');
      ctx.fillRect(130, 60, 40, 60);
      
      ctx.setFillStyle('#3498db');
      ctx.fillRect(190, 60, 80, 30);
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.fillText('不同颜色矩形', 150, 140);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.fillRect 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.fillRect',
          description: '填充矩形区域'
        })
      });
    } catch (error) {
      this.setData({
        result: `fillRect 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // fillText - 填充文字
  testCanvasContextFillText() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f8f9fa');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#2c3e50');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.fillText 演示', 150, 30);
      
      // 不同字体大小
      ctx.setFillStyle('#e74c3c');
      ctx.setFontSize(12);
      ctx.setTextAlign('left');
      ctx.fillText('小号字体 (12px)', 20, 70);
      
      ctx.setFontSize(16);
      ctx.fillText('中号字体 (16px)', 20, 95);
      
      ctx.setFontSize(20);
      ctx.fillText('大号字体 (20px)', 20, 125);
      
      // 不同对齐方式
      ctx.setFillStyle('#27ae60');
      ctx.setFontSize(14);
      
      ctx.setTextAlign('left');
      ctx.fillText('左对齐', 150, 155);
      
      ctx.setTextAlign('center');
      ctx.fillText('居中对齐', 150, 175);
      
      ctx.setTextAlign('right');
      ctx.fillText('右对齐', 150, 195);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.fillText 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.fillText',
          description: '在画布上绘制填充文字'
        })
      });
    } catch (error) {
      this.setData({
        result: `fillText 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // lineTo - 线到
  testCanvasContextLineTo() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#ecf0f1');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.lineTo 演示', 150, 30);
      
      // 简单直线
      ctx.setStrokeStyle('#e74c3c');
      ctx.setLineWidth(3);
      ctx.beginPath();
      ctx.moveTo(50, 70);
      ctx.lineTo(150, 70);
      ctx.stroke();
      
      // 折线
      ctx.setStrokeStyle('#27ae60');
      ctx.beginPath();
      ctx.moveTo(50, 100);
      ctx.lineTo(100, 120);
      ctx.lineTo(150, 100);
      ctx.lineTo(200, 130);
      ctx.lineTo(250, 110);
      ctx.stroke();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.fillText('直线', 100, 85);
      ctx.fillText('折线', 150, 145);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.lineTo 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.lineTo',
          description: '从当前点绘制直线到指定点'
        })
      });
    } catch (error) {
      this.setData({
        result: `lineTo 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // moveTo - 移动到
  testCanvasContextMoveTo() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f8f8f8');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.moveTo 演示', 150, 30);
      
      // 演示moveTo的作用 - 不连接的线段
      ctx.setStrokeStyle('#e74c3c');
      ctx.setLineWidth(3);
      ctx.beginPath();
      ctx.moveTo(50, 70);
      ctx.lineTo(100, 70);
      ctx.moveTo(120, 70);
      ctx.lineTo(170, 70);
      ctx.moveTo(190, 70);
      ctx.lineTo(240, 70);
      ctx.stroke();
      
      // 对比：不使用moveTo的连接线
      ctx.setStrokeStyle('#27ae60');
      ctx.beginPath();
      ctx.moveTo(50, 100);
      ctx.lineTo(100, 100);
      ctx.lineTo(120, 120);
      ctx.lineTo(170, 120);
      ctx.stroke();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.fillText('独立线段', 145, 85);
      ctx.fillText('连续线段', 145, 135);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.moveTo 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.moveTo',
          description: '移动画笔到指定位置，不绘制线条'
        })
      });
    } catch (error) {
      this.setData({
        result: `moveTo 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // quadraticCurveTo - 二次曲线
  testCanvasContextQuadraticCurveTo() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#fafafa');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.quadraticCurveTo 演示', 150, 30);
      
      // 简单的二次曲线
      ctx.setStrokeStyle('#e74c3c');
      ctx.setLineWidth(3);
      ctx.beginPath();
      ctx.moveTo(50, 80);
      ctx.quadraticCurveTo(100, 50, 150, 80);
      ctx.stroke();
      
      // 向下弯曲的曲线
      ctx.setStrokeStyle('#27ae60');
      ctx.beginPath();
      ctx.moveTo(180, 80);
      ctx.quadraticCurveTo(215, 110, 250, 80);
      ctx.stroke();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.fillText('向上弯曲', 100, 100);
      ctx.fillText('向下弯曲', 215, 100);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.quadraticCurveTo 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.quadraticCurveTo',
          description: '绘制二次贝塞尔曲线'
        })
      });
    } catch (error) {
      this.setData({
        result: `quadraticCurveTo 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // rect - 矩形
  testCanvasContextRect() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f5f5f5');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.rect 演示', 150, 30);
      
      // 基础矩形路径
      ctx.setStrokeStyle('#e74c3c');
      ctx.setLineWidth(3);
      ctx.beginPath();
      ctx.rect(50, 60, 80, 50);
      ctx.stroke();
      
      // 填充矩形
      ctx.setFillStyle('#27ae60');
      ctx.beginPath();
      ctx.rect(150, 60, 60, 40);
      ctx.fill();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.fillText('描边矩形', 90, 125);
      ctx.fillText('填充矩形', 180, 115);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.rect 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.rect',
          description: '创建矩形路径'
        })
      });
    } catch (error) {
      this.setData({
        result: `rect 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // restore - 恢复
  testCanvasContextRestore() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#ecf0f1');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.restore 演示', 150, 30);
      
      // 原始状态
      ctx.setFillStyle('#e74c3c');
      ctx.fillRect(50, 60, 40, 30);
      
      // 保存状态
      ctx.save();
      
      // 修改状态
      ctx.setFillStyle('#27ae60');
      ctx.fillRect(110, 60, 40, 30);
      
      // 恢复状态
      ctx.restore();
      ctx.fillRect(170, 60, 40, 30);  // 应该是红色
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.fillText('原始状态', 70, 105);
      ctx.fillText('修改状态', 130, 105);
      ctx.fillText('恢复状态', 190, 105);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.restore 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.restore',
          description: '恢复之前保存的画布状态'
        })
      });
    } catch (error) {
      this.setData({
        result: `restore 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // rotate - 旋转
  testCanvasContextRotate() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f8f9fa');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.rotate 演示', 150, 30);
      
      // 原始矩形（未旋转）
      ctx.setFillStyle('#e74c3c');
      ctx.fillRect(40, 60, 60, 30);
      
      // 旋转45度
      ctx.save();
      ctx.translate(170, 75);
      ctx.rotate(Math.PI / 4);
      ctx.translate(-30, -15);
      ctx.setFillStyle('#3498db');
      ctx.fillRect(0, 0, 60, 30);
      ctx.restore();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.setTextAlign('center');
      ctx.fillText('0°', 70, 110);
      ctx.fillText('45°', 170, 110);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.rotate 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.rotate',
          description: '旋转坐标系'
        })
      });
    } catch (error) {
      this.setData({
        result: `rotate 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // save - 保存状态
  testCanvasContextSave() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f0f0f0');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.save 演示', 150, 30);
      
      // 原始状态
      ctx.setFillStyle('#e74c3c');
      ctx.fillRect(50, 60, 40, 30);
      
      // 保存状态
      ctx.save();
      
      // 修改状态
      ctx.setFillStyle('#27ae60');
      ctx.fillRect(110, 60, 40, 30);
      
      // 恢复状态
      ctx.restore();
      ctx.fillRect(170, 60, 40, 30);
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.fillText('原始', 70, 105);
      ctx.fillText('修改', 130, 105);
      ctx.fillText('恢复', 190, 105);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.save 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.save',
          description: '保存当前画布状态'
        })
      });
    } catch (error) {
      this.setData({
        result: `save 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // scale - 缩放
  testCanvasContextScale() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f8f9fa');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.scale 演示', 150, 30);
      
      // 原始尺寸
      ctx.setFillStyle('#e74c3c');
      ctx.fillRect(50, 60, 40, 30);
      
      // 缩放1.5倍
      ctx.save();
      ctx.scale(1.5, 1.5);
      ctx.setFillStyle('#27ae60');
      ctx.fillRect(70, 70, 40, 30);
      ctx.restore();
      
      // 缩放0.5倍
      ctx.save();
      ctx.scale(0.5, 0.5);
      ctx.setFillStyle('#3498db');
      ctx.fillRect(300, 200, 40, 30);
      ctx.restore();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.fillText('原始 1x', 70, 105);
      ctx.fillText('放大 1.5x', 120, 125);
      ctx.fillText('缩小 0.5x', 170, 115);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.scale 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.scale',
          description: '缩放坐标系'
        })
      });
    } catch (error) {
      this.setData({
        result: `scale 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // setFillStyle - 设置填充样式
  testCanvasContextSetFillStyle() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#fff');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.setFillStyle 演示', 150, 30);
      
      // 不同颜色填充
      ctx.setFillStyle('#ff0000');
      ctx.fillRect(50, 60, 40, 40);
      
      ctx.setFillStyle('#00ff00');
      ctx.fillRect(110, 60, 40, 40);
      
      ctx.setFillStyle('#0000ff');
      ctx.fillRect(170, 60, 40, 40);
      
      ctx.setFillStyle('#ffff00');
      ctx.fillRect(230, 60, 40, 40);
      
      // 使用rgba
      ctx.setFillStyle('rgba(255, 0, 255, 0.5)');
      ctx.fillRect(80, 120, 60, 40);
      
      ctx.setFillStyle('rgba(0, 255, 255, 0.7)');
      ctx.fillRect(160, 120, 60, 40);
      
      // 使用渐变
      const gradient = ctx.createLinearGradient(50, 180, 250, 180);
      gradient.addColorStop(0, '#ff6b6b');
      gradient.addColorStop(1, '#4ecdc4');
      ctx.setFillStyle(gradient);
      ctx.fillRect(50, 180, 200, 30);
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.fillText('基础颜色', 150, 115);
      ctx.fillText('透明度', 150, 175);
      ctx.fillText('渐变填充', 150, 225);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.setFillStyle 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.setFillStyle',
          description: '设置填充颜色和样式',
          types: ['颜色值', 'rgba', '渐变']
        })
      });
    } catch (error) {
      this.setData({
        result: `setFillStyle 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // setFontSize - 设置字体大小
  testCanvasContextSetFontSize() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f5f5f5');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.setFontSize 演示', 150, 30);
      
      // 不同字体大小
      ctx.setFillStyle('#e74c3c');
      ctx.setTextAlign('left');
      
      ctx.setFontSize(10);
      ctx.fillText('10px 字体大小', 50, 70);
      
      ctx.setFontSize(14);
      ctx.fillText('14px 字体大小', 50, 95);
      
      ctx.setFontSize(18);
      ctx.fillText('18px 字体大小', 50, 125);
      
      ctx.setFontSize(22);
      ctx.fillText('22px 字体大小', 50, 155);
      
      ctx.setFontSize(26);
      ctx.fillText('26px 字体大小', 50, 185);
      
      ctx.setFontSize(30);
      ctx.fillText('30px 字体大小', 50, 220);
      
      // 字体大小对比
      ctx.setFillStyle('#27ae60');
      ctx.setFontSize(12);
      ctx.setTextAlign('center');
      ctx.fillText('字体大小从10px到30px递增', 150, 250);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.setFontSize 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.setFontSize',
          description: '设置字体大小',
          range: '10px - 30px演示'
        })
      });
    } catch (error) {
      this.setData({
        result: `setFontSize 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // setGlobalAlpha - 设置全局透明度
  testCanvasContextSetGlobalAlpha() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#fff');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.setGlobalAlpha 演示', 150, 30);
      
      // 不同透明度的矩形
      ctx.setFillStyle('#ff0000');
      
      ctx.setGlobalAlpha(1.0);
      ctx.fillRect(50, 60, 40, 40);
      
      ctx.setGlobalAlpha(0.8);
      ctx.fillRect(110, 60, 40, 40);
      
      ctx.setGlobalAlpha(0.6);
      ctx.fillRect(170, 60, 40, 40);
      
      ctx.setGlobalAlpha(0.4);
      ctx.fillRect(230, 60, 40, 40);
      
      ctx.setGlobalAlpha(0.2);
      ctx.fillRect(50, 120, 40, 40);
      
      // 重叠效果演示
      ctx.setGlobalAlpha(0.5);
      ctx.setFillStyle('#00ff00');
      ctx.fillRect(120, 120, 60, 60);
      
      ctx.setFillStyle('#0000ff');
      ctx.fillRect(140, 140, 60, 60);
      
      // 恢复透明度
      ctx.setGlobalAlpha(1.0);
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.fillText('1.0', 70, 115);
      ctx.fillText('0.8', 130, 115);
      ctx.fillText('0.6', 190, 115);
      ctx.fillText('0.4', 250, 115);
      ctx.fillText('0.2', 70, 175);
      ctx.fillText('重叠效果', 150, 220);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.setGlobalAlpha 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.setGlobalAlpha',
          description: '设置全局透明度',
          range: '0.2 - 1.0演示'
        })
      });
    } catch (error) {
      this.setData({
        result: `setGlobalAlpha 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // setLineCap - 设置线条端点样式
  testCanvasContextSetLineCap() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f8f9fa');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.setLineCap 演示', 150, 30);
      
      ctx.setStrokeStyle('#e74c3c');
      ctx.setLineWidth(10);
      
      // butt - 默认，平直边缘
      ctx.setLineCap('butt');
      ctx.beginPath();
      ctx.moveTo(50, 80);
      ctx.lineTo(150, 80);
      ctx.stroke();
      
      // round - 圆形端点
      ctx.setLineCap('round');
      ctx.beginPath();
      ctx.moveTo(50, 120);
      ctx.lineTo(150, 120);
      ctx.stroke();
      
      // square - 方形端点
      ctx.setLineCap('square');
      ctx.beginPath();
      ctx.moveTo(50, 160);
      ctx.lineTo(150, 160);
      ctx.stroke();
      
      // 绘制参考线
      ctx.setStrokeStyle('#ddd');
      ctx.setLineWidth(1);
      ctx.beginPath();
      ctx.moveTo(50, 60);
      ctx.lineTo(50, 180);
      ctx.moveTo(150, 60);
      ctx.lineTo(150, 180);
      ctx.stroke();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(12);
      ctx.setTextAlign('left');
      ctx.fillText('butt (默认)', 160, 85);
      ctx.fillText('round (圆形)', 160, 125);
      ctx.fillText('square (方形)', 160, 165);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.setLineCap 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.setLineCap',
          description: '设置线条端点样式',
          options: ['butt', 'round', 'square']
        })
      });
    } catch (error) {
      this.setData({
        result: `setLineCap 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // setLineDash - 设置虚线样式
  testCanvasContextSetLineDash() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#fafafa');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.setLineDash 演示', 150, 30);
      
      ctx.setStrokeStyle('#e74c3c');
      ctx.setLineWidth(3);
      
      // 实线
      ctx.setLineDash([]);
      ctx.beginPath();
      ctx.moveTo(50, 70);
      ctx.lineTo(250, 70);
      ctx.stroke();
      
      // 短虚线
      ctx.setLineDash([5, 5]);
      ctx.beginPath();
      ctx.moveTo(50, 100);
      ctx.lineTo(250, 100);
      ctx.stroke();
      
      // 长虚线
      ctx.setLineDash([15, 5]);
      ctx.beginPath();
      ctx.moveTo(50, 130);
      ctx.lineTo(250, 130);
      ctx.stroke();
      
      // 点划线
      ctx.setLineDash([15, 5, 5, 5]);
      ctx.beginPath();
      ctx.moveTo(50, 160);
      ctx.lineTo(250, 160);
      ctx.stroke();
      
      // 复杂虚线
      ctx.setLineDash([20, 5, 5, 5, 5, 5]);
      ctx.beginPath();
      ctx.moveTo(50, 190);
      ctx.lineTo(250, 190);
      ctx.stroke();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.setTextAlign('left');
      ctx.fillText('实线 []', 50, 85);
      ctx.fillText('短虚线 [5,5]', 50, 115);
      ctx.fillText('长虚线 [15,5]', 50, 145);
      ctx.fillText('点划线 [15,5,5,5]', 50, 175);
      ctx.fillText('复杂虚线 [20,5,5,5,5,5]', 50, 205);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.setLineDash 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.setLineDash',
          description: '设置虚线样式',
          usage: 'setLineDash([实线长度, 间隙长度])',
          examples: ['实线', '短虚线', '长虚线', '点划线', '复杂虚线']
        })
      });
    } catch (error) {
      this.setData({
        result: `setLineDash 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // setLineJoin - 设置线条连接样式
  testCanvasContextSetLineJoin() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f0f0f0');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.setLineJoin 演示', 150, 30);
      
      ctx.setStrokeStyle('#e74c3c');
      ctx.setLineWidth(15);
      
      // miter - 尖角连接
      ctx.setLineJoin('miter');
      ctx.beginPath();
      ctx.moveTo(50, 80);
      ctx.lineTo(100, 120);
      ctx.lineTo(150, 80);
      ctx.stroke();
      
      // round - 圆角连接
      ctx.setLineJoin('round');
      ctx.beginPath();
      ctx.moveTo(50, 140);
      ctx.lineTo(100, 180);
      ctx.lineTo(150, 140);
      ctx.stroke();
      
      // bevel - 斜角连接
      ctx.setLineJoin('bevel');
      ctx.beginPath();
      ctx.moveTo(50, 200);
      ctx.lineTo(100, 240);
      ctx.lineTo(150, 200);
      ctx.stroke();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(12);
      ctx.setTextAlign('center');
      ctx.fillText('miter (尖角)', 100, 105);
      ctx.fillText('round (圆角)', 100, 165);
      ctx.fillText('bevel (斜角)', 100, 225);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.setLineJoin 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.setLineJoin',
          description: '设置线条连接样式',
          options: ['miter', 'round', 'bevel']
        })
      });
    } catch (error) {
      this.setData({
        result: `setLineJoin 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // setLineWidth - 设置线条宽度
  testCanvasContextSetLineWidth() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#fff8dc');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.setLineWidth 演示', 150, 30);
      
      ctx.setStrokeStyle('#3498db');
      
      // 不同线条宽度
      ctx.setLineWidth(1);
      ctx.beginPath();
      ctx.moveTo(50, 70);
      ctx.lineTo(250, 70);
      ctx.stroke();
      
      ctx.setLineWidth(3);
      ctx.beginPath();
      ctx.moveTo(50, 100);
      ctx.lineTo(250, 100);
      ctx.stroke();
      
      ctx.setLineWidth(5);
      ctx.beginPath();
      ctx.moveTo(50, 130);
      ctx.lineTo(250, 130);
      ctx.stroke();
      
      ctx.setLineWidth(8);
      ctx.beginPath();
      ctx.moveTo(50, 160);
      ctx.lineTo(250, 160);
      ctx.stroke();
      
      ctx.setLineWidth(12);
      ctx.beginPath();
      ctx.moveTo(50, 190);
      ctx.lineTo(250, 190);
      ctx.stroke();
      
      ctx.setLineWidth(16);
      ctx.beginPath();
      ctx.moveTo(50, 220);
      ctx.lineTo(250, 220);
      ctx.stroke();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.setTextAlign('left');
      ctx.fillText('1px', 20, 75);
      ctx.fillText('3px', 20, 105);
      ctx.fillText('5px', 20, 135);
      ctx.fillText('8px', 20, 165);
      ctx.fillText('12px', 20, 195);
      ctx.fillText('16px', 20, 225);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.setLineWidth 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.setLineWidth',
          description: '设置线条宽度',
          range: '1px - 16px'
        })
      });
    } catch (error) {
      this.setData({
        result: `setLineWidth 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // setMiterLimit - 设置斜接面限制比例
  testCanvasContextSetMiterLimit() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f8f8f8');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.setMiterLimit 演示', 150, 30);
      
      ctx.setStrokeStyle('#e74c3c');
      ctx.setLineWidth(8);
      ctx.setLineJoin('miter');
      
      // 默认miter limit (10)
      ctx.setMiterLimit(10);
      ctx.beginPath();
      ctx.moveTo(50, 80);
      ctx.lineTo(100, 120);
      ctx.lineTo(150, 80);
      ctx.stroke();
      
      // 小miter limit (2)
      ctx.setMiterLimit(2);
      ctx.beginPath();
      ctx.moveTo(50, 140);
      ctx.lineTo(100, 180);
      ctx.lineTo(150, 140);
      ctx.stroke();
      
      // 大miter limit (20)
      ctx.setMiterLimit(20);
      ctx.beginPath();
      ctx.moveTo(50, 200);
      ctx.lineTo(100, 240);
      ctx.lineTo(150, 200);
      ctx.stroke();
      
      // 极小miter limit (0.5)
      ctx.setMiterLimit(0.5);
      ctx.beginPath();
      ctx.moveTo(50, 260);
      ctx.lineTo(100, 280);
      ctx.lineTo(150, 260);
      ctx.stroke();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.setTextAlign('center');
      ctx.fillText('默认 limit=10', 100, 105);
      ctx.fillText('小 limit=2', 100, 165);
      ctx.fillText('大 limit=20', 100, 225);
      ctx.fillText('极小 limit=0.5', 100, 245);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.setMiterLimit 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.setMiterLimit',
          description: '设置斜接限制',
          usage: 'setMiterLimit(limit)',
          note: '当lineJoin为miter时，控制尖角的最大长度'
        })
      });
    } catch (error) {
      this.setData({
        result: `setMiterLimit 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // setShadow - 设置阴影效果
  testCanvasContextSetShadow() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f0f0f0');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.setShadow 演示', 150, 30);
      
      // 无阴影的矩形
      ctx.setFillStyle('#e74c3c');
      ctx.fillRect(50, 60, 60, 40);
      
      // 轻微阴影
      ctx.setShadow(2, 2, 4, 'rgba(0,0,0,0.3)');
      ctx.setFillStyle('#27ae60');
      ctx.fillRect(50, 120, 60, 40);
      
      // 中等阴影
      ctx.setShadow(4, 4, 8, 'rgba(0,0,0,0.5)');
      ctx.setFillStyle('#3498db');
      ctx.fillRect(50, 180, 60, 40);
      
      // 强阴影
      ctx.setShadow(6, 6, 12, 'rgba(0,0,0,0.7)');
      ctx.setFillStyle('#9b59b6');
      ctx.fillRect(50, 240, 60, 40);
      
      // 彩色阴影
      ctx.setShadow(3, 3, 6, 'rgba(255,0,0,0.6)');
      ctx.setFillStyle('#f39c12');
      ctx.fillRect(150, 60, 60, 40);
      
      // 蓝色阴影
      ctx.setShadow(3, 3, 6, 'rgba(0,0,255,0.6)');
      ctx.setFillStyle('#2ecc71');
      ctx.fillRect(150, 120, 60, 40);
      
      // 绿色阴影
      ctx.setShadow(3, 3, 6, 'rgba(0,255,0,0.6)');
      ctx.setFillStyle('#e67e22');
      ctx.fillRect(150, 180, 60, 40);
      
      // 大偏移阴影
      ctx.setShadow(8, 8, 4, 'rgba(0,0,0,0.4)');
      ctx.setFillStyle('#34495e');
      ctx.fillRect(150, 240, 60, 40);
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.setTextAlign('center');
      ctx.fillText('无阴影', 80, 85);
      ctx.fillText('轻微阴影', 80, 145);
      ctx.fillText('中等阴影', 80, 205);
      ctx.fillText('强阴影', 80, 265);
      ctx.fillText('红色阴影', 180, 85);
      ctx.fillText('蓝色阴影', 180, 145);
      ctx.fillText('绿色阴影', 180, 205);
      ctx.fillText('大偏移阴影', 180, 265);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.setShadow 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.setShadow',
          description: '设置阴影效果',
          usage: 'setShadow(offsetX, offsetY, blur, color)',
          note: '为后续绘制操作添加阴影效果'
        })
      });
    } catch (error) {
      this.setData({
        result: `setShadow 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // setStrokeStyle - 设置描边样式
  testCanvasContextSetStrokeStyle() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#fff');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.setStrokeStyle 演示', 150, 30);
      
      ctx.setLineWidth(4);
      
      // 不同颜色描边
      ctx.setStrokeStyle('#ff0000');
      ctx.strokeRect(50, 60, 40, 40);
      
      ctx.setStrokeStyle('#00ff00');
      ctx.strokeRect(110, 60, 40, 40);
      
      ctx.setStrokeStyle('#0000ff');
      ctx.strokeRect(170, 60, 40, 40);
      
      ctx.setStrokeStyle('#ff00ff');
      ctx.strokeRect(230, 60, 40, 40);
      
      // 透明描边
      ctx.setStrokeStyle('rgba(255, 165, 0, 0.5)');
      ctx.strokeRect(80, 120, 60, 40);
      
      ctx.setStrokeStyle('rgba(128, 0, 128, 0.7)');
      ctx.strokeRect(160, 120, 60, 40);
      
      // 渐变描边
      const gradient = ctx.createLinearGradient(50, 180, 250, 180);
      gradient.addColorStop(0, '#ff6b6b');
      gradient.addColorStop(1, '#4ecdc4');
      ctx.setStrokeStyle(gradient);
      ctx.strokeRect(50, 180, 200, 30);
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.fillText('基础颜色', 150, 115);
      ctx.fillText('透明描边', 150, 175);
      ctx.fillText('渐变描边', 150, 225);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.setStrokeStyle 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.setStrokeStyle',
          description: '设置描边颜色和样式',
          types: ['颜色值', 'rgba', '渐变']
        })
      });
    } catch (error) {
      this.setData({
        result: `setStrokeStyle 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // setTextAlign - 设置文字对齐
  testCanvasContextSetTextAlign() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f8f9fa');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.setTextAlign 演示', 150, 30);
      
      // 绘制参考线
      ctx.setStrokeStyle('#ddd');
      ctx.setLineWidth(1);
      ctx.beginPath();
      ctx.moveTo(150, 50);
      ctx.lineTo(150, 250);
      ctx.stroke();
      
      ctx.setFillStyle('#e74c3c');
      ctx.setFontSize(14);
      
      // left - 左对齐
      ctx.setTextAlign('left');
      ctx.fillText('左对齐 (left)', 150, 80);
      
      // center - 居中对齐
      ctx.setTextAlign('center');
      ctx.fillText('居中对齐 (center)', 150, 110);
      
      // right - 右对齐
      ctx.setTextAlign('right');
      ctx.fillText('右对齐 (right)', 150, 140);
      
      // 不同字体大小的对齐
      ctx.setFillStyle('#27ae60');
      ctx.setFontSize(12);
      
      ctx.setTextAlign('left');
      ctx.fillText('小字体左对齐', 150, 170);
      
      ctx.setTextAlign('center');
      ctx.fillText('小字体居中', 150, 190);
      
      ctx.setTextAlign('right');
      ctx.fillText('小字体右对齐', 150, 210);
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(9);
      ctx.setTextAlign('center');
      ctx.fillText('参考线位置: x=150', 150, 240);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.setTextAlign 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.setTextAlign',
          description: '设置文字水平对齐方式',
          options: ['left', 'center', 'right']
        })
      });
    } catch (error) {
      this.setData({
        result: `setTextAlign 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // setTextBaseline - 设置文字基线
  testCanvasContextSetTextBaseline() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#fafafa');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.setTextBaseline 演示', 150, 30);
      
      // 绘制参考线
      ctx.setStrokeStyle('#ddd');
      ctx.setLineWidth(1);
      const baselineY = 120;
      ctx.beginPath();
      ctx.moveTo(20, baselineY);
      ctx.lineTo(280, baselineY);
      ctx.stroke();
      
      ctx.setFillStyle('#e74c3c');
      ctx.setFontSize(20);
      ctx.setTextAlign('left');
      
      // top - 顶部对齐
      ctx.setTextBaseline('top');
      ctx.fillText('Top', 30, baselineY);
      
      // middle - 中间对齐
      ctx.setTextBaseline('middle');
      ctx.fillText('Middle', 80, baselineY);
      
      // bottom - 底部对齐
      ctx.setTextBaseline('bottom');
      ctx.fillText('Bottom', 150, baselineY);
      
      // alphabetic - 字母基线（默认）
      ctx.setTextBaseline('alphabetic');
      ctx.fillText('Alpha', 220, baselineY);
      
      // 另一组演示
      ctx.setFillStyle('#27ae60');
      ctx.setFontSize(16);
      const baselineY2 = 200;
      
      ctx.setStrokeStyle('#ddd');
      ctx.beginPath();
      ctx.moveTo(20, baselineY2);
      ctx.lineTo(280, baselineY2);
      ctx.stroke();
      
      ctx.setTextBaseline('hanging');
      ctx.fillText('Hang', 50, baselineY2);
      
      ctx.setTextBaseline('ideographic');
      ctx.fillText('Ideo', 120, baselineY2);
      
      ctx.setTextBaseline('alphabetic');
      ctx.fillText('默认', 200, baselineY2);
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(9);
      ctx.setTextAlign('center');
      ctx.fillText('参考线 y=120', 150, 60);
      ctx.fillText('参考线 y=200', 150, 170);
      ctx.fillText('不同基线对齐方式对比', 150, 250);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.setTextBaseline 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.setTextBaseline',
          description: '设置文字垂直对齐基线',
          options: ['top', 'middle', 'bottom', 'alphabetic', 'hanging', 'ideographic']
        })
      });
    } catch (error) {
      this.setData({
        result: `setTextBaseline 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // setTransform - 设置变换矩阵
  testCanvasContextSetTransform() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#ecf0f1');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.setTransform 演示', 150, 30);
      
      // 原始矩形
      ctx.setFillStyle('#e74c3c');
      ctx.fillRect(50, 60, 40, 30);
      
      // 缩放变换
      ctx.setTransform(1.5, 0, 0, 1.5, 0, 0);
      ctx.setFillStyle('#27ae60');
      ctx.fillRect(50, 60, 40, 30);
      
      // 旋转变换
      ctx.setTransform(Math.cos(Math.PI/6), Math.sin(Math.PI/6), -Math.sin(Math.PI/6), Math.cos(Math.PI/6), 0, 0);
      ctx.setFillStyle('#3498db');
      ctx.fillRect(120, 80, 40, 30);
      
      // 倾斜变换
      ctx.setTransform(1, 0.5, 0.2, 1, 0, 0);
      ctx.setFillStyle('#9b59b6');
      ctx.fillRect(100, 100, 40, 30);
      
      // 重置变换
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.setFillStyle('#f39c12');
      ctx.fillRect(50, 180, 40, 30);
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.setTextAlign('center');
      ctx.fillText('原始', 70, 105);
      ctx.fillText('缩放', 120, 85);
      ctx.fillText('旋转', 160, 110);
      ctx.fillText('倾斜', 140, 145);
      ctx.fillText('重置', 70, 225);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.setTransform 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.setTransform',
          description: '设置变换矩阵（重置后设置）',
          usage: 'setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY)'
        })
      });
    } catch (error) {
      this.setData({
        result: `setTransform 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // stroke - 描边
  testCanvasContextStroke() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f0f8ff');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.stroke 演示', 150, 30);
      
      ctx.setLineWidth(3);
      
      // 描边圆形
      ctx.setStrokeStyle('#e74c3c');
      ctx.beginPath();
      ctx.arc(100, 100, 30, 0, 2 * Math.PI);
      ctx.stroke();
      
      // 描边多边形
      ctx.setStrokeStyle('#27ae60');
      ctx.beginPath();
      ctx.moveTo(200, 70);
      ctx.lineTo(230, 100);
      ctx.lineTo(200, 130);
      ctx.lineTo(170, 100);
      ctx.closePath();
      ctx.stroke();
      
      // 描边复杂路径
      ctx.setStrokeStyle('#3498db');
      ctx.beginPath();
      ctx.moveTo(50, 160);
      ctx.quadraticCurveTo(100, 140, 150, 160);
      ctx.quadraticCurveTo(200, 180, 250, 160);
      ctx.stroke();
      
      // 填充+描边组合
      ctx.setFillStyle('#f39c12');
      ctx.setStrokeStyle('#e67e22');
      ctx.setLineWidth(2);
      ctx.beginPath();
      ctx.rect(120, 200, 60, 30);
      ctx.fill();
      ctx.stroke();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.setTextAlign('center');
      ctx.fillText('圆形描边', 100, 145);
      ctx.fillText('多边形描边', 200, 145);
      ctx.fillText('曲线描边', 150, 185);
      ctx.fillText('填充+描边', 150, 250);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.stroke 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.stroke',
          description: '描边当前路径',
          note: '可以与fill()组合使用',
          examples: ['圆形', '多边形', '曲线', '组合效果']
        })
      });
    } catch (error) {
      this.setData({
        result: `stroke 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // strokeRect - 描边矩形
  testCanvasContextStrokeRect() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f5f5f5');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.strokeRect 演示', 150, 30);
      
      // 不同线宽的描边矩形
      ctx.setStrokeStyle('#e74c3c');
      ctx.setLineWidth(1);
      ctx.strokeRect(50, 60, 40, 30);
      
      ctx.setLineWidth(3);
      ctx.strokeRect(110, 60, 40, 30);
      
      ctx.setLineWidth(5);
      ctx.strokeRect(170, 60, 40, 30);
      
      ctx.setLineWidth(8);
      ctx.strokeRect(230, 60, 40, 30);
      
      // 不同颜色的描边矩形
      ctx.setLineWidth(4);
      
      ctx.setStrokeStyle('#27ae60');
      ctx.strokeRect(50, 110, 50, 40);
      
      ctx.setStrokeStyle('#3498db');
      ctx.strokeRect(120, 110, 50, 40);
      
      ctx.setStrokeStyle('#9b59b6');
      ctx.strokeRect(190, 110, 50, 40);
      
      // 嵌套描边矩形
      ctx.setStrokeStyle('#f39c12');
      ctx.setLineWidth(2);
      ctx.strokeRect(80, 170, 80, 60);
      ctx.strokeRect(90, 180, 60, 40);
      ctx.strokeRect(100, 190, 40, 20);
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(9);
      ctx.setTextAlign('center');
      ctx.fillText('1px', 70, 105);
      ctx.fillText('3px', 130, 105);
      ctx.fillText('5px', 190, 105);
      ctx.fillText('8px', 250, 105);
      ctx.fillText('不同颜色', 150, 165);
      ctx.fillText('嵌套矩形', 120, 250);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.strokeRect 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.strokeRect',
          description: '描边矩形',
          usage: 'strokeRect(x, y, width, height)'
        })
      });
    } catch (error) {
      this.setData({
        result: `strokeRect 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // strokeText - 描边文字
  testCanvasContextStrokeText() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#fff');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.strokeText 演示', 150, 30);
      
      // 基础描边文字
      ctx.setStrokeStyle('#e74c3c');
      ctx.setLineWidth(2);
      ctx.setFontSize(24);
      ctx.strokeText('描边文字', 150, 80);
      
      // 填充+描边组合
      ctx.setFillStyle('#27ae60');
      ctx.setStrokeStyle('#1e8449');
      ctx.setLineWidth(1);
      ctx.setFontSize(20);
      ctx.fillText('填充文字', 150, 120);
      ctx.strokeText('填充文字', 150, 120);
      
      // 不同线宽的描边
      ctx.setFillStyle('#3498db');
      ctx.setStrokeStyle('#2980b9');
      ctx.setFontSize(18);
      
      ctx.setLineWidth(1);
      ctx.strokeText('细描边', 80, 160);
      
      ctx.setLineWidth(3);
      ctx.strokeText('粗描边', 200, 160);
      
      // 彩色描边
      ctx.setStrokeStyle('#9b59b6');
      ctx.setLineWidth(2);
      ctx.setFontSize(22);
      ctx.strokeText('彩色描边', 150, 200);
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.fillText('基础描边', 150, 95);
      ctx.fillText('填充+描边', 150, 135);
      ctx.fillText('不同线宽', 150, 175);
      ctx.fillText('彩色效果', 150, 220);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.strokeText 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.strokeText',
          description: '绘制描边文字',
          usage: 'strokeText(text, x, y, maxWidth)'
        })
      });
    } catch (error) {
      this.setData({
        result: `strokeText 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // transform - 变换
  testCanvasContextTransform() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f8f8f8');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.transform 演示', 150, 30);
      
      // 原始矩形
      ctx.setFillStyle('#e74c3c');
      ctx.fillRect(50, 60, 40, 30);
      
      // 应用变换
      ctx.transform(1, 0.2, 0.3, 1, 50, 0);
      ctx.setFillStyle('#27ae60');
      ctx.fillRect(50, 60, 40, 30);
      
      // 再次变换（累积效果）
      ctx.transform(1.2, 0, 0, 1.2, 20, 20);
      ctx.setFillStyle('#3498db');
      ctx.fillRect(50, 60, 40, 30);
      
      // 重置并应用新变换
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.transform(0.8, 0, 0, 0.8, 100, 50);
      ctx.setFillStyle('#9b59b6');
      ctx.fillRect(80, 120, 40, 30);
      
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.setTextAlign('center');
      ctx.fillText('原始', 70, 105);
      ctx.fillText('变换1', 120, 85);
      ctx.fillText('累积变换', 160, 70);
      ctx.fillText('新变换', 120, 175);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.transform 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.transform',
          description: '应用变换矩阵（累积效果）',
          usage: 'transform(scaleX, skewX, skewY, scaleY, translateX, translateY)',
          note: '在当前变换基础上累积新的变换'
        })
      });
    } catch (error) {
      this.setData({
        result: `transform 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // translate - 平移
  testCanvasContextTranslate() {
    try {
      const ctx = wx.createCanvasContext('canvasContext');
      
      ctx.setFillStyle('#f0f0f0');
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('CanvasContext.translate 演示', 150, 30);
      
      // 原始位置
      ctx.setFillStyle('#e74c3c');
      ctx.fillRect(0, 0, 30, 30);
      
      // 平移后绘制
      ctx.translate(50, 50);
      ctx.setFillStyle('#27ae60');
      ctx.fillRect(0, 0, 30, 30);
      
      // 再次平移
      ctx.translate(50, 20);
      ctx.setFillStyle('#3498db');
      ctx.fillRect(0, 0, 30, 30);
      
      // 负方向平移
      ctx.translate(-30, 50);
      ctx.setFillStyle('#9b59b6');
      ctx.fillRect(0, 0, 30, 30);
      
      // 绘制坐标轴帮助理解
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.setStrokeStyle('#ddd');
      ctx.setLineWidth(1);
      ctx.beginPath();
      ctx.moveTo(0, 150);
      ctx.lineTo(300, 150);
      ctx.moveTo(150, 0);
      ctx.lineTo(150, 300);
      ctx.stroke();
      
      // 标记原点
      ctx.setFillStyle('#f39c12');
      ctx.beginPath();
      ctx.arc(150, 150, 3, 0, 2 * Math.PI);
      ctx.fill();
      
      ctx.setFillStyle('#666');
      ctx.setFontSize(10);
      ctx.setTextAlign('center');
      ctx.fillText('原点(0,0)', 15, 15);
      ctx.fillText('平移(50,50)', 65, 65);
      ctx.fillText('平移(100,70)', 115, 85);
      ctx.fillText('平移(70,120)', 85, 135);
      ctx.fillText('坐标中心', 150, 140);
      
      ctx.draw();
      
      this.setData({
        result: 'CanvasContext.translate 测试成功',
        resultStr: this.formatResult({
          method: 'CanvasContext.translate',
          description: '平移坐标系原点',
          usage: 'translate(x, y)',
          note: '后续绘制操作的坐标原点会发生偏移'
        })
      });
    } catch (error) {
      this.setData({
        result: `translate 测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // API处理函数实现
  testCanvasContextArcFunc: function() {
    this.testCanvasContextArc();
  },

  testCanvasContextArcToFunc: function() {
    this.testCanvasContextArcTo();
  },

  testCanvasContextBeginPathFunc: function() {
    this.testCanvasContextBeginPath();
  },

  testCanvasContextBezierCurveToFunc: function() {
    this.testCanvasContextBezierCurveTo();
  },

  testCanvasContextClearRectFunc: function() {
    this.testCanvasContextClearRect();
  },

  testCanvasContextClipFunc: function() {
    this.testCanvasContextClip();
  },

  testCanvasContextClosePathFunc: function() {
    this.testCanvasContextClosePath();
  },

  testCanvasContextGradientFunc: function() {
    this.testCanvasContextGradient();
  },

  testCanvasContextPatternFunc: function() {
    this.testCanvasContextPattern();
  },

  testCanvasContextDrawFunc: function() {
    this.testCanvasContextDraw();
  },

  testCanvasContextDrawImageFunc: function() {
    this.testCanvasContextDrawImage();
  },

  testCanvasContextFillFunc: function() {
    this.testCanvasContextFill();
  },

  testCanvasContextFillRectFunc: function() {
    this.testCanvasContextFillRect();
  },

  testCanvasContextFillTextFunc: function() {
    this.testCanvasContextFillText();
  },

  testCanvasContextLineToFunc: function() {
    this.testCanvasContextLineTo();
  },

  testCanvasContextMoveToFunc: function() {
    this.testCanvasContextMoveTo();
  },

  testCanvasContextQuadraticCurveToFunc: function() {
    this.testCanvasContextQuadraticCurveTo();
  },

  testCanvasContextRectFunc: function() {
    this.testCanvasContextRect();
  },

  testCanvasContextRestoreFunc: function() {
    this.testCanvasContextRestore();
  },

  testCanvasContextRotateFunc: function() {
    this.testCanvasContextRotate();
  },

  testCanvasContextSaveFunc: function() {
    this.testCanvasContextSave();
  },

  testCanvasContextScaleFunc: function() {
    this.testCanvasContextScale();
  },

  testCanvasContextSetFillStyleFunc: function() {
    this.testCanvasContextSetFillStyle();
  },

  testCanvasContextSetFontSizeFunc: function() {
    this.testCanvasContextSetFontSize();
  },

  testCanvasContextSetGlobalAlphaFunc: function() {
    this.testCanvasContextSetGlobalAlpha();
  },

  testCanvasContextSetLineCapFunc: function() {
    this.testCanvasContextSetLineCap();
  },

  testCanvasContextSetLineDashFunc: function() {
    this.testCanvasContextSetLineDash();
  },

  testCanvasContextSetLineJoinFunc: function() {
    this.testCanvasContextSetLineJoin();
  },

  testCanvasContextSetLineWidthFunc: function() {
    this.testCanvasContextSetLineWidth();
  },

  testCanvasContextSetMiterLimitFunc: function() {
    this.testCanvasContextSetMiterLimit();
  },

  testCanvasContextSetShadowFunc: function() {
    this.testCanvasContextSetShadow();
  },

  testCanvasContextSetStrokeStyleFunc: function() {
    this.testCanvasContextSetStrokeStyle();
  },

  testCanvasContextSetTextAlignFunc: function() {
    this.testCanvasContextSetTextAlign();
  },

  testCanvasContextSetTextBaselineFunc: function() {
    this.testCanvasContextSetTextBaseline();
  },

  testCanvasContextSetTransformFunc: function() {
    this.testCanvasContextSetTransform();
  },

  testCanvasContextStrokeFunc: function() {
    this.testCanvasContextStroke();
  },

  testCanvasContextStrokeRectFunc: function() {
    this.testCanvasContextStrokeRect();
  },

  testCanvasContextStrokeTextFunc: function() {
    this.testCanvasContextStrokeText();
  },

  testCanvasContextTransformFunc: function() {
    this.testCanvasContextTransform();
  },

  testCanvasContextTranslateFunc: function() {
    this.testCanvasContextTranslate();
  },

  testCanvasContextSimpleFunc: function() {
    this.testCanvasContextSimple();
  },

  clearCanvasFunc: function() {
    this.clearCanvas();
  }
});
